<template>
  <view class="grid col-3 grid-square flex-sub">
    <view
      class="bg-img"
      v-for="(item, index) in imageList"
      :key="index"
      @tap="ViewImagefm"
      :data-url="imageList[index].url"
    >
      <image :src="imageList[index].url" mode="aspectFit" />
      <view class="maskimg" v-show="item.isShow"></view>
      <cCircle
        class="cCircle"
        v-show="item.isShow"
        :class="item.progress == 100 ? 'hide1' : ''"
        :circleWidth="4"
        :size="60"
        :percent="Number(item.progress)"
      ></cCircle>
      <view class="close" @tap.stop="DelImgfm" :data-index="index" v-if="!disabled">
        <text class="cuIcon-close"></text>
      </view>
    </view>
    <view class="solids" @tap="ChooseImages()" v-if="imageList.length < lengthNum">
      <text class="cuIcon-cameraadd"></text>
    </view>
  </view>
</template>

<script>
  import cCircle from '../components/circle.vue'
  export default {
    props: {
      lengthNum: {
        type: Number,
        default: 9,
      },
      value: {
        type: Array,
        default: [],
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    components: {
      cCircle,
    },
    data() {
      return {
        imageList: [],
        imgList: [],
      }
    },
    methods: {
      // 标题图片裁剪
      ViewImagefm(e) {
        uni.previewImage({
          urls: this.imgList,
          current: e.currentTarget.dataset.url,
        })
      },
      DelImgfm(e) {
        uni.showModal({
          title: '',
          content: '确定要删除图片？',
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              this.imageList.splice(e.currentTarget.dataset.index, 1)
            }
          },
        })
      },
      async ChooseImages(menthType, type) {
        this.ChooseImage()
      },
      ChooseImage() {
        let _this = this
        let num = 0
        num = _this.lengthNum - _this.imageList.length
        uni.chooseImage({
          count: num,
          sizeType: ['copressed'],
          sourceType: ['camera', 'album'],
          success(res) {
            //因为有一张图片， 输出下标[0]， 直接输出地址
            // console.log(res.tempFilePaths);
            var imgFiles = res.tempFilePaths
            const tempFiles = res.tempFiles
            let resSize = tempFiles[0].size
            console.log('上传数据的大小是：' + resSize)
            if (resSize > 20971520) {
              uni.showToast({
                title: '上传图片大小不能超过20MB',
                icon: 'error',
              })
              return
            }
            if (_this.imageList.length + imgFiles.length > _this.lengthNum) {
              uni.showToast({
                title: `图片最多不能超过${_this.lengthNum}张`,
                duration: 2000,
                icon: 'none',
              })
              return
            }
            let length1 = _this.imageList.length
            var uper
            imgFiles.forEach((el, index) => {
              let index1 = length1 + index
              _this.imageList.push({
                url: el,
                progress: 0,
                isShow: true,
              })
              uni.showToast({
                title: '正在上传请稍后',
                icon: 'none',
                duration: 2000,
              })
              uper = uni.uploadFile({
                // 需要上传的地址
                url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
                // filePath  需要上传的文件
                filePath: el,
                name: 'file',
                success(res1) {
                  _this.imageList[index1].url = JSON.parse(res1.data).data[0].url
                  setTimeout(() => {
                    _this.imageList[index1].isShow = false
                  }, 2000)
                },
              })
              // onProgressUpdate 上传对象更新的方法
              uper.onProgressUpdate(function (res) {
                // console.log(res);
                _this.imageList[index1].progress = res.progress
              })
            })
          },
          fail: (fail) => {
            if (this.$userActiveCancalAct.some(v => fail.errMsg.includes(v.failMsg))) {
              return false;
            }
            this.$SHOWMODAL_TO_SETTINGS();
          },
        })
      },
    },
    watch: {
      imageList: {
        deep: true,
        handler(newVal, oldVal) {
          let arr = this.imageList.map((el) => {
            return el.url
          })
          this.imgList = arr
          this.$emit('input', arr)
        },
      },
      value: {
        deep: true,
        // immediate: true,
        handler(newVal, oldVal) {
          if (this.imgList == this.value) return
          let arr = this.value.map((el) => {
            return {
              url: el,
              progress: 0,
              isShow: false,
            }
          })
          this.imgList = JSON.parse(JSON.stringify(this.value))
          // this.$emit("input", arr);
          this.imageList = arr
        },
      },
    },
  }
</script>

<style lang="scss" scoped>
  .grid.col-3.grid-square {
    display: flex;
    .bg-img {
      width: 212rpx;
      height: 212rpx;
    }

    /* #ifdef MP */
    .solids {
      width: 212rpx;
      height: 212rpx;
    }
    /* #endif */
  }
  .grid.grid-square {
    overflow: visible;
  }
  .grid.col-3.grid-square > .bg-img:nth-child(3n) {
    margin-right: 0;
  }
  .bg-img {
    box-shadow: 0px 0px 6px 1px rgba(67, 67, 67, 0.16);
    position: relative;
    .close {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
    }
    .cCircle {
      // background: rgba(0,0,0,0.5);
      width: 120rpx;
      height: 120rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .maskimg {
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .hide1 {
      animation: change 3s;
    }
    @keyframes change {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
  }
</style>
